<template>
  <body>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="img">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) in list.banners" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box">
      <div class="box1">
        <span style="background-color: rgb(120, 160, 209)">直降</span>
        <span>包邮</span>
        {{ list.masterName }}{{ list.slaveName }}
      </div>
      <div class="box2">
        <p></p>
      </div>
      <div class="box3">
        <div class="left">
          <span style="font-size: 15px; color: #c03131"></span>
          <span style="font-size: 20px; margin-right: 5px; color: #c03131"
            >￥{{ list.minPrice / 100 }}</span
          >
          <span style="font-size: 12px; color: #999">{{
            list.maxPrice / 100
          }}</span>
        </div>
        <div class="right">
          <span style="font-size: 12px; color: #797d82"
            >{{ list.inventory }}人购买</span
          >
        </div>
      </div>
      <div class="box4">
        <div
          class="left"
          style="background-color: white; height: 24px; line-height: 24px"
        >
          <span style="font-size: 13px; color: #797d82; background-color: white"
            >价格:&nbsp; x</span
          >
          2
        </div>
        <div class="right" style="background-color: white; height: 24px">
          <img
            src="../../assets/jiantou.png"
            alt=""
            style="height: 24px; background-color: white"
          />
        </div>
      </div>
      <div class="box5">
        <span style="width: 56px; font-size: 14px; color: #797d82"
          >配送至:</span
        >
        <span style="font-size: 13px; width: 260px"
          >上海黄浦区非机动啥假发票感觉到破案机机感觉到破案机机感觉到破案机机机机机构</span
        >
        <img
          src="../../assets/jiantou.png"
          alt=""
          style="height: 24px; background-color: white"
        />
      </div>
      <div class="box6">
        <img
          src="../../assets/对勾.png"
          alt=""
          style="height: 12px; background-color: white"
        />
        <span style="font-size: 12px; background-color: white">包邮</span>
      </div>
    </div>
    <div class="body">
      <span>——商品详情——</span>
    </div>
    <div id="box" v-for="(item, index) in list.descPics" :key="index">
      <img :src="item" alt="" class="tupian1" />
    </div>
    <div class="body">
      <span style="font-size: 12px; color: #797d82">——预定流程及须知——</span>
    </div>
    <img src="../../assets/group5.b0b24d0.png" alt="" class="tupian5" />
    <div class="content">
      <p class="yi">一.关于发货</p>
      <p class="er">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="yi">一.关于发货</p>
      <p class="er">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="yi">一.关于发货</p>
      <p class="er">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="yi">一.关于发货</p>
      <p class="er">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
    </div>
    <footer class="bott">
      <div class="bott_left">
        <div>
          <img src="https://s4.ax1x.com/2021/12/11/oTgFHJ.png" alt="" />
          <span>客服</span>
        </div>
        <div>
          <img src="https://s4.ax1x.com/2021/12/11/oTgm36.png" alt="" />
          <span>收藏</span>
        </div>
        <router-link to="/cart">
          <div class="mar_right">
            <van-icon name="shopping-cart-o" size="32" :badge="count" />
            <span>购物车</span>
          </div>
        </router-link>
      </div>
      <div class="bott_right">
        <div class="btn_gwc" @click="shop">加入购物车</div>
        <div class="btn_shop">立即购买</div>
      </div>
    </footer>
  </body>
</template>

<script >
import { Toast } from "vant";
import $axios from "../../api/request";
export default {
  data() {
    return {
      list: [],
      count: "",
      token: "",
    };
  },
  created() {
    this.gelist();
  },
  methods: {
    gelist() {
      $axios
        .get(
          "http://zl.huruqing.cn:3003/product/detail?productId=" +
            this.$route.params.productId
        )
        .then((res) => {
          this.list = res.result;
          this.count = res.result.cartNum;
        });
    },
    onClickLeft() {
      history.back();
      history.back();
    },
    shop() {
      if (this.$store.state.token == "") {
        Toast.fail("请先登录");
      } else {
        $axios
          .get(
            "http://zl.huruqing.cn:3003/cart/add?productId=" +
              this.$route.params.productId
          )
          .then((res) => {
            ++this.count;
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./shoppingdetail.scss";
</style>
<style lang="scss">
.van-nav-bar__content {
  background: #fff;
  .van-nav-bar__left i {
    color: #c31313;
  }
  .van-nav-bar__text {
    color: #c31313;
  }
}
</style>